<template>
	<view class="bt">
		<view class="plr-36 ptb-20 bb">
			<view class="mt-15">
				<view class="size-36 red bold text-center">
					<text>回收品类</text>
				</view>
				<view class="mt-15">
					<view class="content mt-15 flex flex-around">
						<view :class="['ptb-20 size-31 plr-20 ' + (currentIndex == index ? 'border' : '')]" v-for="(item, index) of proposed_price" :key="index" @click="onClickItem(index)">
							<view class="flex flex-column">
								<u-image width="100rpx" height="100rpx" :src="item.image"></u-image>
								<text class="gray-3 pt-5">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="plr-36 ptb-20 bb">
			<view class="mt-15">
				<view class="size-36 red bold text-center">
					<text>今日参考价</text>
				</view>
				<view class="mt-15">
					<view class="content mt-15">
						<view v-show="currentIndex === index" v-for="(item, index) of proposed_price" :key="index">
							<view class="flex pd-30 bb size-24" v-for="(it, i) of item.sons" :key="it.id">
								<view class="flex_l">{{ it.name }}{{ it.desc ? '【' + it.desc + '】' : '' }}</view>
								<view class="flex_r">￥{{ it.custom_price ? it.custom_price : 0 + '【未设置】' }}/{{ it.unit }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				回收要求
			</view>
			<view class="flex ptb-30 flex-around">
				<view class="plr-30 pb flex-column flex">
					<u-image width="75rpx" height="75rpx" src="/static/canshui.png"></u-image>
					<text class="gray-3 pt-10">拒绝掺水</text>
				</view>
				<view class="plr-30 flex-column flex">
					<u-image width="75rpx" height="75rpx" src="/static/canzha.png"></u-image>
					<text class="gray-3 pt-10">拒绝掺杂</text>
				</view>
				<view class="plr-30 flex-column flex">
					<u-image width="75rpx" height="75rpx" src="/static/weight.png"></u-image>
					<text class="gray-3 pt-10">单次20KG起</text>
				</view>
			</view>
			<view class="ptb-10">
				<view class="bold red pb-10 text-center">因回收成本原因，社区、写字楼、单元楼价格面议</view>
				<view class="bold text-center">回收员工作时间为早九晚七，请各位客户合理安排下单时间，谢谢配合</view>
			</view>
			<view class="pd-30">
				<view class="flex" @click="toMap">
					<view>
						附近回收员
					</view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				订单信息
			</view>
			<view class="pd-30 bb">
				<view class="flex">
					<view>
						重量（kg）
					</view>
					<uni-data-checkbox mode="tag" v-model="info.weight_type" :localdata="weightTypeArray"></uni-data-checkbox>
				</view>
			</view>
			<view class="pd-30 bb">
				<view class="flex">
					<view>
						预约日期
					</view>
					<uni-datetime-picker :start="start_time" type="date" v-model="date" placeholder="请选择" :border="false" />
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<view class="pd-30 bb" @click="timeShow = true">
				<view class="flex">
					<view>
						预约时间
					</view>
					<view>{{defaultHour}}</view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<u-field v-model="info.remarks" label="备注信息:" placeholder="选填"></u-field>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				联系信息
			</view>
			<u-field v-model="info.username" label="姓名:" placeholder="必填" v-show="info.address_id"></u-field>
			<u-field v-model="info.mobile" label="联系电话:" placeholder="必填" v-show="info.address_id"></u-field>
			<view class="flex pd-30 bb" @click="goAddress">
				<view class="flex_l">
					<view>联系地址：</view>
					<view class="u-flex-1">
						<view>{{info.address}}</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		
		
		<view class="ptb-20">
			<!-- <view class="plr-36 size-34 bold">
				图片上传
			</view> -->
			<u-upload :action="action" max-count="9" :header="header" @on-success="uploadSuccess" @on-remove="uploadRemove"></u-upload>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		
		
		<view class="ptb-20" @click="toArticle" v-if="article_id">
			<view class="pd-30 text-center">
				提交订单将自动同意<text class="yellow">《回收免责协议》</text>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="fixed-bottom plr-36 ptb-50 bg-white flex" style="height: 100px;">
			<u-button type="warning" @click="subApi" ripple :loading="loading">提交订单</u-button>
		</view>
		<u-select v-model="timeShow" :list="timeArray" @confirm="confirm" :default-value="[3]"></u-select>
	</view>
</template>

<script>
	import { baseUrl } from '@/common/http';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				action: baseUrl + '/api/common/upload',
				header: {
					token: uni.getStorageSync('token') || ''
				},
				loading: false,
				timeShow: false,
				timeArray: [],
				defaultHour: '12:00',
				article_id: 0,
				weightTypeArray: [],
				currentIndex: 0,
				start_time: Date.parse(new Date()),
				items: [],
				wechat_tmpl_ids: [],
				proposed_price: [],
				date: this.$u.timeFormat(Date.parse(new Date()), 'yyyy-mm-dd'),
				images: [],
				info: {
					username: '',
					mobile: '',
					address_id: '',
					address: '',
					remarks: '',
					lng: 0,
					lat: 0,
					weight_type: 1,
					scheduledtime: null
				}
			};
		},
		computed: {
			...mapState(["userInfo"])
		},
		onLoad(option) {
			this.init();
		},
		onUnload() {
			uni.$off('address_id');
		},
		onShow() {
			this.getAddress(this.info.address_id);
		},
		methods: {
			uploadRemove(index, lists, name) {
				this.images.splice(index, 1);
			},
			uploadSuccess(data, index, lists, name) {
				if(data.code == 1) {
					this.images.push(data.data.url);
				}
			},
			init() {
				this.$http('/api/order/init', {}).then(data => {
					this.weightTypeArray = data.weight_types;
					this.proposed_price = data.proposed_price;
					this.wechat_tmpl_ids = data.wechat_tmpl_ids;
					this.article_id = data.article_id ? data.article_id : 0;
					this.timeArray = data.operating_hours;
					this.defaultHour = data.default_hour;
					this.items = [];
					for (let item of this.proposed_price) {
						this.items.push(item.name);
					}
					this.getAddress(data.address_id)
				});
			},
			confirm(e) {
				this.defaultHour = e[0].value;
			},
			getAddress(id) {
				if (id) {
					this.$http('/api/address/detail', {
						id: id
					}).then(data => {
						this.info.username = data.name;
						this.info.mobile = data.mobile;
						this.info.address = data.corridor + (data.detail ? '[' + data.detail + ']' : '');
						this.info.address_id = data.id;
						this.info.lat = data.lat;
						this.info.lng = data.lng;
					});
				}
			},
			bindPickerChange(r) {
				this.info.weight_type = parseInt(r.detail.value);
			},
			onClickItem(index) {
				this.currentIndex = index;
			},
			toMap() {
				uni.navigateTo({
					url: '/pages/home/recycler-distribution'
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/my/address/list?is_return=1'
				})
			},
			toArticle() {
				uni.navigateTo({
					url: `/pages/my/set/detail?id=${this.article_id}`
				})
			},
			subApi() {
				this.loading = true;
				this.info.scheduledtime = this.date + ' ' + this.defaultHour;
				this.info.images = this.images;
				this.$http('/api/order/add', this.info, "POST").then(data => {
					this.loading = false;
					// #ifdef MP-WEIXIN
					let _this = this;
					if (_this.wechat_tmpl_ids && _this.wechat_tmpl_ids.length) {
						uni.requestSubscribeMessage({
							tmplIds: _this.wechat_tmpl_ids,
							success() {
								uni.navigateTo({url:'/pages/order/success'});
							}
						})
					}
					// #endif
					// #ifndef MP-WEIXIN
					setTimeout(() => {
						uni.navigateTo({url:'/pages/order/success'});
					}, 1000)
					// #endif
				}, () => {
					this.loading = false;
				});
			}
		},
		mounted() {
			let _this = this;
			uni.$on('address_id', function(id) {
				_this.info.address_id = id;
			})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field .u-label-text {
		font-weight: 400 !important;
	}

	/deep/.u-cell_title {
		font-weight: 400 !important;
	}

	/deep/.u-cell__value {
		color: $yellow;
	}

	/deep/.u-radio__label {
		font-size: 26rpx;
	}
	
	/deep/.is-tag-checked {
		border-color: #F66E23!important;
		background-color: #F66E23!important;
	}
	
	.border {
		border: 4rpx solid green;
		border-radius: 10rpx;
	}

	.img-shop {
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.img-tisp {
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.radio {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;

		.radio-circle {
			width: 22rpx;
			height: 22rpx;
			background: $yellow;
			border-radius: 50%;
		}
	}

	.fixed-bottom {
		height: 120rpx;
	}
</style>
